<template>
  <div class="ganttContainer">
    <div ref="gantt" style="height:85vh;"></div>
  </div>
</template>
 
<script>

import {exportBizPlanMilestoneExcel,saveOrUpdateBizPlanMilestone,saveOrUpdateBizPlanMilestoneList,saveBizPlanMilestone,saveBizPlanMilestoneList,deleteBizPlanMilestone,queryBizPlanMilestone,queryBizPlanMilestoneListPage,updateBizPlanMilestone,deleteBizPlanMilestoneList} from '@/api/biz/plan/bizPlanMilestoneApi';
import {exportBizPlanManageExcel,saveOrUpdateBizPlanManage,saveOrUpdateBizPlanManageList,saveBizPlanManage,saveBizPlanManageList,deleteBizPlanManage,queryBizPlanManage,queryBizPlanManageListPage,updateBizPlanManage,deleteBizPlanManageList} from '@/api/biz/plan/bizPlanManageApi';
import {gantt} from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/locale/locale_cn.js'  // 本地化
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_undo.js';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_drag_timeline.js';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js';
import { reqCommonMsg } from '@/util/reqCommonMsg';

export default {
  name: 'gantt',
  props: {
    milestoneData: {
      type: Array,
      default() {
        return {}
      }
    },
    planTreeData: {
      type: Array,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tasks : {
        data: [
          {
            id: 1, //任务id
            text: 'Project #1', //任务名
            // start_date: "18-08-2020", //开始时间
            // progress: 0.6,//任务完成情况，进度
            // duration: 2,//任务时长，从start_date开始计算 
            // order: 10, 
            open: true,//默认是否打开
            type: 'project',// project为项目任务类型，绿色，默认为task为普通任务类型，蓝色
            // users: [2, 3]
          },{
            id: 2, text: 'Task #1', render:'split',parent: 1
          },{
            id: 22, text: 'Stage #1', start_date: '2020-08-18 03:28',end_date:'2020-08-18 04:30', 
            parent: 2
          },{
            id: 222, text: 'Stage #2', start_date: '2020-08-18 05:28',end_date:'2020-08-18 06:30', 
            parent: 2
          },{
            id: 3, text: 'Task #2', start_date: '2020-08-18 08:10',end_date:'2020-08-18 08:20', parent: 1//父任务ID
          }
        ],
        // links: [
        // 	{id: 1, source: 1, target: 2, type: "1"},
        // 	{id: 2, source: 2, target: 3, type: "0"}
        // ]
      }
    }
  },
  watch: {
    milestoneData: {
      handler(newValue, oldValue) {
        this.handleTaskData(this.viewModel);
      },
      deep: true
    },
  },
  methods: {
    
    handleTaskData(){

    },
    /**
     * 实例化甘特图
     */
    genGantt() {
      gantt.config.date_format = '%Y-%m-%d %H:%i';//设置数据中的时间格式，对应start_date格式
      gantt.config.columns = [//设置列
        {name:'text',       label:'Task name',  width:'*', tree:true },
        {name:'start_date', label:'Start time', align:'center' },
      ];
      
      gantt.config.duration_unit = 'hour';
      // gantt.templates.tooltip_date_format=function (date){
      // 	var formatFunc = gantt.date.date_to_str("%Y-%m-%d %H:%i");
      // 	return formatFunc(date);
      // };
      //自定义工具栏
      gantt.templates.tooltip_text = function (start, end, task) {
        return '<b>任务名称:</b> ' + task.text + '<br/><b>工作时间:</b> ' + new Date(start).getHours()+':'+new Date(start).getMinutes()+' - '+ new Date(end).getHours()+':'+new Date(end).getMinutes()
      }
      //监测到鼠标已经离开包裹着ghtml的div的解决方案
      // gantt.ext.tooltips.tooltipFor({
      //   selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
      //   global: true
      // })
      gantt.config.step = 1; 
      gantt.config.start_date = new Date('2020-08-18 00:00');//时间刻度的开始时间
      gantt.config.end_date = new Date('2020-08-22 23:59');//时间刻度的结束时间
      gantt.config.scales = [
        { unit: 'day', step: 1, date: '%j日' },
        {unit: 'hour', step: 1, format: '%H:%i'} //时间刻度的显示单位
      ];
      // gantt.attachEvent("onGanttReady", function(){
      // 	var tooltips = gantt.ext.tooltips;
      // 	tooltips.tooltip.setViewport(gantt.$task_data);
      // });
	
      // gantt.config.multiselect = false
      // gantt.config.multiselect_one_level = true; //在一个或任何级别内是否可以使用多任务选择
      gantt.config.readonly=false;//只读模式的甘特图
      //初始化
      gantt.init(this.$refs.gantt);
      gantt.parse(this.tasks);
    },
    
  },
  mounted() {
    this.genGantt();
  }
}
</script>
 
<style>
  .ganttContainer {
    height: 100% !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
  }
  .container {
    height: 85vh;
    width: 100%;
  }
  .loadingStyle{
    z-index: 10000 !important;
  }
  .gantt_task_progress{
    text-align:left;
    padding-left:10px;
      box-sizing: border-box;
    color:white;
    font-weight: bold;
  }
	.highlighted-column {
		background-color:#fff3a1;
	}
	.gantt_task_scale .gantt_scale_cell{
		cursor: default;
	}
	.gantt_task_scale .gantt_scale_cell.highlighted-column {
		color: #454545;
		font-weight: bold;
	}
  .gantt_task_cell.week_end{
		background-color: #EFF5FD;
	}
	.gantt_task_row.gantt_selected .gantt_task_cell.week_end{
		background-color: #F8EC9C;
	}
  .gantt_tooltip{
    z-index: 10000 !important;
  }

    .red .gantt_cell, .odd.red .gantt_cell,
    .red .gantt_task_cell, .odd.red .gantt_task_cell{
        background-color: #FDE0E0;
    }
    .green .gantt_cell, .odd.green .gantt_cell,
    .green .gantt_task_cell, .odd.green .gantt_task_cell {
        background-color: #BEE4BE;
    }
  
  .gantt_task_cell.no_work_hour{
		background-color: #F5F5F5;
	}
	.gantt_task_row.gantt_selected .gantt_task_cell.no_work_hour{
		background-color: #F8EC9C;
	}
  /* mark线颜色样式 */
  .red_line{
    background-color: #c00101;
  }
  .pink_line{
    background-color: #d36f6f;
  }
  .blue_line{
    background-color: #3f7fdf;
  }
  .dark_blue_line{
    background-color: #0010a1;
  }
  
  .black_line{
    background-color: #000000;
  }
  .green_line{
    background-color: #7fb47e;
  }
  .dark_green_line{
    background-color: #0ba308;
  }
  .orange_line{
    background-color: #d47d0a;
  }
  .yellow_line{
    background-color: #acaf05;
  }
  .purple_line{
    background-color: #6807a0;
  }
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
  /* @import "~dhtmlx-gantt/codebase/skins/dhtmlxgantt_meadow.css"; */
</style>